<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 100%;
      display: flex;
      margin: 0.2rem 0 0 0;
      position: relative;
    }

    /*左侧的导航样式*/
    .nav_left {
      width: 100%;
      overflow-x: auto; /* 允许水平滚动 */
    }

    .nav_left::-webkit-scrollbar {
      display: none;
    }

    .nav_content {
      white-space: nowrap; /* 防止换行 */
      padding: 0 0.7rem;
    }

    .nav_content span {
      display: inline-block;
      padding: 0.4rem 0.6rem;
      font-size: 0.875rem;
      cursor: pointer;
    }

    .nav_content .active {
      border-bottom: 2px solid #7f4395;
      color: #7f4395;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="wrap">
      <div class="nav_left" id="navLeft">
        <div class="nav_content">
          <span v-for="(item, index) in arr" :key="item.first_id" 
                :class="{ active: index === currentIndex }"
                @click="selectItem(index)">
            {{ item.first_name }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        arr: [
          { first_id: "0", first_name: "热门" },
          { first_id: "621", first_name: "零食" },
          { first_id: "627", first_name: "美食" },
          { first_id: "279", first_name: "男装" },
          { first_id: "294", first_name: "女装" },
          { first_id: "122", first_name: "美妆" },
          { first_id: "339", first_name: "内衣配饰" },
          { first_id: "391", first_name: "香水" },
          { first_id: "35", first_name: "鞋靴" },
          { first_id: "39", first_name: "运动" },
          { first_id: "153", first_name: "箱包" },
          { first_id: "119", first_name: "美护个护" },
          { first_id: "355", first_name: "家具" },
          { first_id: "51", first_name: "零食" },
          { first_id: "334", first_name: "电器" },
          { first_id: "369", first_name: "家居" },
          { first_id: "10", first_name: "日用" },
          { first_id: "223", first_name: "数码" },
          { first_id: "429", first_name: "出行" },
          { first_id: "546", first_name: "健康保健" },
          { first_id: "433", first_name: "定制" },
        ],
        currentIndex: 0 // 默认选中第一个
      },
      methods: {
        selectItem(index) {
          this.currentIndex = index;
          this.which(this.arr[index].first_id);
        },
      }
    })
  </script>
</body>

</html>